<template>
	<el-dialog :close-on-click-modal="false" v-bind="$attrs" append-to-body v-dialogDrag :width="dialogWidth || '900px'"
		:title="titleValue" v-if="showDialog" v-on="$listeners" :visible.sync="showDialog" :before-close='beforeClose'>
		
		<el-form v-if="showDialog" ref="formData" :label-width="labelWidth" class="formData">
			<slot v-if="showDialog"></slot>
			<el-row :gutter="10" v-if="showButton" class=" xc-margin-t-10">
				<el-col :span="22">
					<el-form-item class="fr">
						<slot name="button"> </slot>
						<el-button v-if="showCancelButton && !$slots.button" icon="el-icon-error" @click="onCancel">{{cancelText}}
						</el-button>
						<el-button v-if="showConfirmButton && !$slots.button" icon="el-icon-success" type="primary" @click="onSubmit">
							{{confirmText}}
						</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			showConfirm: {
				type: Boolean,
				default: false
			},
			//显示底部按钮
			showButton: {
				type: Boolean,
				default: true
			},
			title: {
				type: null,
				default: '',
			},
			dialogWidth: {
				type: String,
				default: '',
			},
			// 是否显示确认按钮
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			// 是否显示取消按钮
			showCancelButton: {
				type: Boolean,
				default: true
			},
			// 确认文案
			confirmText: {
				type: String,
				default: '确认'
			},
			// 取消文案
			cancelText: {
				type: String,
				default: '关闭'
			},
		},
		inject: ['vm'],
		data() {
			return {
				showDialog: false,
				titleValue: '',
				labelWidth: '',
			}
		},
		watch: {
			title() {
				this.titleValue = this.title;
			}
		},
		created() {
			this.titleValue = this.title || this.vm.title || '操作';
			this.labelWidth = this.width || this.vm.labelWidth || '80px';
		},
		methods: {
			beforeClose(done) {
				if (this.showConfirm) {
					this.openConfirm('确认关闭?','', () => {
						console.log('确定关闭');
						done();
					})
				} else {
					done();
				}
			},
			onCancel() {
				this.showDialog = false;
				// this.
			},
			show() {
				this.showDialog = true;
				this.$nextTick(() => {
					this.$emit('show');
				})
			},
			onSubmit() {
				this.$emit('confirm');
			}
		},

	}
</script>

<style>

</style>